<template>
    <div>
        <page-view>
            <template #option>
                <div class="btn-box">
                    <el-button type="primary" @click="importCompanyBank" :loading="importLoading">导入</el-button>
                    <el-button type="primary" @click="exportCompanyBank" :loading="loading">导出</el-button>
                    <el-button type="primary" @click="showAddFrom">新增</el-button>
                </div>
            </template>

            <template #form>

                <SearchForm :data-form="formInline" @on-search="onSearch" @onReset="onSearch">
                    <el-form-item prop="bizOrgId">
                        <el-select v-model="formInline.bizOrgId" filterable remote reserve-keyword placeholder="请输入公司编码"
                            :remote-method="getCompanyOptions" :loading="loading">
                            <el-option v-for="item in CompanyOptions" :key="item.id" :label="item.fullName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="accountName">
                        <el-input v-model="formInline.accountName" clearable placeholder="请输入账户名称" />
                    </el-form-item>
                    <el-form-item prop="bankAccountNo">
                        <el-input v-model="formInline.bankAccountNo" clearable placeholder="请输入账号" />
                    </el-form-item>
                </SearchForm>
            </template>
            <template #table="tableScope">
              <PubilcTable :table-data="tableData" :tableHeight="tableScope.tableHeight" :list-config="columns" :showIndex='true'
                :translateTextDeal="translateTextDeal" :actionLimitName="actionLimitName" :page-data="pageData"
                @on-action="onAction" />
            </template>
        </page-view>
        <page-main>
        </page-main>
        <eForm :dialog-visible="dialogVisible" :is-add="isAdd" :formData="formData" @on-submit="formSubmit"
            @handle-close="handleClose" />
        <importForm :dialog-visible="dialogVisible2" :acceptOption='acceptOption' @on-submit="formSubmit2"
            @handle-close="handleClose" />
    </div>
</template>
<script  setup name="companyBank">
import { onMounted, reactive, ref } from 'vue'
import eForm from './components/addForm.vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import api from '@/api/index'
import { downloadFile } from '@/util/downFile'
import { accountTypeOption } from './components/config'
import { statusText } from '@/util/index'

const formInline = reactive({})
const dialogVisible = ref(false)
const dialogVisible2 = ref(false)
const isAdd = ref('add')
const pageData = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const importLoading = ref(false)
const loading = ref(false)
const formData = ref({})
const acceptOption = ref('.xls,.xlsx')
const tableData = ref([])
const CompanyOptions = ref([])

const OPERTATE = [
    { alias: 'setting', label: '设为默认', condition: 'defaultAccount', function: (res)=>{
        console.log(res)
        if(res === false){
            return true
        }else{
            return false
        }
    }},
    { alias: 'edit', label: '修改' },
    { alias: 'del', label: '删除' }
]

const columns = [
    { alias: 'bizOrgCode', label: '公司编码', width: '120px', showTooltip:true },
    { alias: 'bizOrgName', label: '公司名称', width: '260px', showTooltip:true },
    { alias: 'accountName', label: '户名', showTooltip:true },
    { alias: 'bankAccountNo', label: '账号', showTooltip:true },
    { alias: 'acctTitleName', label: '科目', showTooltip:true },
    { alias: 'bankName', label: '所属银行', showTooltip:true },
    { alias: 'bankFullName', label: '开户行', showTooltip:true },
    { alias: 'profitCenterName', label: '利润中心', showTooltip:true },
    { alias: 'accountType', label: '账户类型', type: 'translateText', showTooltip:true },
    { label: '操作', listArr: OPERTATE, width: '180px', fixed: 'right', type: 'action' }
]

onMounted(()=>{
    onSearch()
})

const actionLimitName = ([row, filed]) => {
  const info = { ...filed }
  if (filed.alias === 'setting') {
    filed['label'] = row.defaultAccount ? '' : '设为默认'
  }
  return filed.label
}

const onSearch = () => {
    const params = { ...formInline,...pageData.value}
    api.dataMaintenance.getCompanyBankList(params).then((res)=>{
        tableData.value = res.list
        pageData.value.total = res.total
    })
}
const translateTextDeal = (item, val) => {
    return statusText(accountTypeOption, val)
}
const deleteRow = (val)=>{
    ElMessageBox.confirm('确定删除此银行信息吗？删除后将不可恢复。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        const id = val.id
        api.dataMaintenance.deleteByIdCompanyBank(id).then((res)=>{
            ElMessage({
                type: 'success',
                message: '删除成功!'
            });
            onSearch()
        })
    })
}
const editRow = (row) => {
    dialogVisible.value = true
    formData.value = row
    console.log(formData.value)
    isAdd.value = 'edit'
}
const settingRow = (row) => {
    api.dataMaintenance.updateByIdCompanyBank(row.id).then((res)=>{
        ElMessage({
            type: 'success',
            message: '操作成功!'
        });
        onSearch()
    })
}
const onAction = ([item, row]) => {
    const obj = {
        'del': deleteRow,
        'edit': editRow,
        'setting': settingRow,
        'pageNum': onSearch,
        'pageSize': onSearch
    }
    if (typeof item === 'string') {
        pageData.value[item] = row
        if (item === 'pageSize') pageData.value.pageNum = 1
        obj[item]()
    } else {
        obj[item.alias](row)
    }
}
const getCompanyOptions = (query)=>{
    if (query) {
        const params = {
            orgCodeOrName: query,
            pageNum: 1,
            pageSize: 10
        }
        api.dataMaintenance.getOrgTreeList(params).then((res)=>{
            CompanyOptions.value = res.list || []
        })
    } else {
        CompanyOptions.value = []
    }
}
const showAddFrom = () => {
    dialogVisible.value = true
    formData.value = {}
    isAdd.value = 'add'
}
const formSubmit = (val)=>{
    const params = {...val}
    if(isAdd.value === 'add'){
        api.dataMaintenance.addCompanyBank(params).then((res)=>{
            ElMessage({
                type: 'success',
                message: '新增成功!'
            });
            onSearch()
        })
    }else{
        api.dataMaintenance.updateCompanyBank(params).then((res)=>{
            ElMessage({
                type: 'success',
                message: '修改成功!'
            });
            onSearch()
        })
    }
}
const formSubmit2 = (val)=>{
    let fd = new FormData()
    fd.append('multipartFile', val.file)
    api.dataMaintenance.importCompanyBank(fd).then((res)=>{
        console.log(res)
        ElMessage({
            type: 'success',
            message: '导入成功!'
        });
        importLoading.value = false
        onSearch()
    })
}
const handleClose = val => {
    dialogVisible.value = val
    dialogVisible2.value = val
    importLoading.value = false
}

const importCompanyBank = ()=>{
    importLoading.value = true
    dialogVisible2.value = true
}
const exportCompanyBank = ()=>{
    loading.value = true
    const params = {...formInline}
    api.dataMaintenance.downCompanyBank(params).then((res)=>{
        console.log(res)
        downloadFile(res, '公司银行信息列表', 'xlsx')
        ElMessage({
            type: 'success',
            message: '导出成功!'
        });
        loading.value = false
    })
}
</script>

<style lang="scss" scoped>
.clearfix {
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 10px;
    margin-bottom: 10px;
    &:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
    .role-span{
        font-weight: 700;
        color: #303133;
        font-size: 15px;
    }
}
.fixButtom{
    float: right;
}
</style>
